<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <title>开始使用layui</title>
  <link rel="stylesheet" href="/static/layui/css/layui.css">
  <!-- 引入字体图标 -->
  <link rel="stylesheet" href="/static/font-awesome-4.7.0/css/font-awesome.min.css">
  <script src="/static/js/jquery.js"></script>
    <script src="https://cdn.bootcss.com/layer/2.3/layer.js"></script>
</head>
<style>
  .house{
    width: 100px;
    height: 100px;
    margin: 10px;
    text-align: center;
    cursor: pointer;
    color: #ffffff;
    float: left;
  }
  .house:hover{
    /*border:1px solid #ffffff ;*/
      color: #1a6fa8;
  }
  .statu{
    float: left;
    margin: 5px;
    text-align: center
  }
    .lines{
        width: 40px;;
    }
  .lines:hover{
      background-color: #01AAED;
      color: #ffffff;
  }
    .sizes{
        height: 40px;
        width: 150px;
    }
</style>
<body>
 
<!-- 你的HTML代码 -->
<div class="layui-row" id="app">
  <div class="layui-col-md10" style="margin-top: 5px;" >

      {volist name="list" id="vo"}
      {if $vo.status == 1 }
          <div class="house" style="background-color: #01AAED;" @click="action()">
              <span>{$vo.room_number}</span>
              <hr class="layui-bg-black">
              <p>{$vo.name}</p>
              <p>{$vo.price}/晚</p>
              <p>空闲</p>
              <div style="float: right;background-color: #5FB878;margin-top: -90px;margin-right: -20px;"  v-show='show'>
                  <ul>
                      <li class="lines" @click="check_in({$vo.id})">入住</li>
                      <li class="lines">预订</li>
                      <li class="lines">退房</li>
                  </ul>
              </div>
          </div>
      {elseif $vo.status == 2 /}
          <div class="house" style="background-color: #009688;" @click="action()">
              <span>{$vo.room_number}</span>
              <hr class="layui-bg-black">
              <p>{$vo.name}</p>
              <p>{$vo.price}/晚</p>
              <p>在住</p>
              <div style="float: right;background-color: #5FB878;margin-top: -90px;margin-right: -20px;"  v-show='show'>
                  <ul>
                      <li class="lines">保修</li>
                      <li class="lines">调整</li>
                      <li class="lines">退房</li>
                  </ul>
              </div>
          </div>
      {else /}
          <div class="house" style="background-color: #009688;" @click="add({$vo.id})">
              <span>{$vo.room_number}</span>
              <hr class="layui-bg-black">
              <p>{$vo.name}</p>
              <p>{$vo.price}/晚</p>
              <p>预订</p>
          </div>
      {/if}
      {/volist}
  </div>
  <div class="layui-col-md2" style="margin-top: 10px;">

      <div class="statu">
        <span>空房</span><div style="background-color: #01AAED;" class="sizes"></div>
      </div>
      <div class="statu">
        <span>在住</span><div style="background-color: #009688;" class="sizes"></div>
      </div>
      <div class="statu">
        <span>预订</span><div style="background-color: #5FB878;" class="sizes"></div>
      </div>
      <div class="statu">
          <span>钟点房</span><div style="background-color: #FFB800;" class="sizes"></div>
      </div>
      <div class="statu">
          <span>脏房</span><div style="background-color: #AA8855;" class="sizes"></div>
      </div>
      <div class="statu">
          <span>维修</span><div style="background-color: red;" class="sizes"></div>
      </div>
      <div class="statu">
          <span>停用</span><div style="background-color: #9900FF;" class="sizes"></div>
      </div>
      <div class="statu">
          <span>特殊房</span><div style="background-color: #2F4056;" class="sizes"></div>
      </div>
  </div>

</div>


<script src="/static/layui/layui.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>

//一般直接写在一个js文件中
layui.use(['layer', 'form'], function(){
  var layer = layui.layer
  ,form = layui.form;
  
  layer.msg('Hello World');
});

var example2 = new Vue({
    el: '#app',
    data: {
        show:false
    },
    // 在 `methods` 对象中定义方法
    methods: {
        check_in: function (id) {
            $.ajax({
                type:"get",
                url: "{:url('admin/index/check_in')}",
                data: {
                    id:id
                },
                //回调函数
                success: function(data){
                    layer.open({
                        title:'入住管理',
                        type: 1,
                        skin: 'layui-layer-lan', //加上边框
                        anim: 4,
                        area: ['1000px', '500px'], //宽高
                        content: data
                    });
                }});
        },
        action: function(data){
            if(this.show == false){
                this.show=true
            }else{
                this.show=false
            }

        }
    }
})
</script> 
</body>
</html>